<template>
  <div class="first page">
     <div class="contain">
       <!-- <div class="icon"></div> -->
       <div class='head'>
         <div :class="this.lrtag ===0 ? 'actionper' : ''" @click='changeTologin()' tag="div">登录</div>
         <div :class="this.lrtag ===1 ? 'actionper' : ''" @click='changeToregister()' tag="div">注册</div>
       </div>
       <form action="" class="userInfor">
         <!-- 用户信息 -->
         <input type="text" placeholder="请输入账号/手机号" maxlength="20" v-model="id">
         <input type="password" placeholder="请输入6~20位密码" maxlength="16" v-model="password">
         <div class="check">
           <input type="checkbox">
           <span>记住密码</span>
         </div>
         <button :id="lrtag" class="login" @click="decide (id, password)">{{rlstatus}}</button>
       </form>

     </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rlstatus: '登录',
      lrtag: 0,
      id: '',
      password: '',
      userdata: [
        {
          name: '游客——赛亚人',
          id: 'w18196343460',
          password: '123456'
        },
        {
          name: '游客——海绵宝宝',
          id: 'a18196343460',
          password: '123456'
        },
        {
          name: '游客——疾风剑豪',
          id: 'b18196343460',
          password: '123456'
        }
      ]
    }
  },
  methods: {
    // 切换登录
    changeTologin () {
      if (this.lrtag === 0) {
        return 0
      } else {
        this.lrtag = 0
        this.rlstatus = '登录'
      }
    },
    // 切换到注册
    changeToregister () {
      if (this.lrtag === 1) {
        return 1
      } else {
        this.lrtag = 1
        this.rlstatus = '注册'
      }
    },
    decide (u, p) {
      if (this.lrtag === 0) {
        this.login(u, p)
      } else {
        this.register(u, p)
      }
    },
    // 登录
    login (u, p) {
      if (this.id !== '') {
        var locate = -1
        for (var i = 0; i < this.userdata.length; i++) {
          if (this.userdata[i].id === u) {
            console.log(i, this.userdata[i].id)
            locate = i
            if (this.userdata[locate].password === p) {
              console.log('success')
            } else {
              this.$toast('密码不正确')
            }
          }
        }
        if (locate === -1) {
          this.$toast('账号不存在')
        }
      } else {
        this.$toast('账号格式不正确')
      }
    },
    // 注册
    register (u, p) {
      var j = 1
      for (var i = 0; i < this.userdata.length; i++) {
        if (this.userdata[i].id === u) {
          j++
          this.$toast('账号已存在')
        }
      }
      if (j === 1) {
        var newuser = { name: 'trump', id: u, password: p }
        this.userdata.unshift(newuser)
        this.$toast('注册成功')
        console.log(this.userdata)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.first {
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #fff;
  .contain {
    position: relative;
    width: 80%;
    min-width: 300px;
    margin: -15px auto;
    padding-top: 50px;
    height: 500px;
    .head{
      margin:20px auto;
      width: 80%;
      display: flex;
      div{
        flex: 1;
        display: inline-block;
        text-align: center;
        font-size: 18px;
        height: 20px;
        line-height: 30px;
      }
      .actionper{
        border-top: 2px solid rgba(10,170,244,0.9);
      }
    }
    form{
      background-color: #fff;
      .check{
        text-align: left;
        margin-bottom: 5px;
      }
      button{
        width: 100%;
        line-height: 22px;
        background-color: #29f;
        color: #fff;
      }
    }
     .login:hover{
       font-size: 17px;
     }
   }
   .end{
     a:nth-child(1){
       position: absolute;
       left: 0;
     }
     a:nth-child(2){
       position: absolute;
       right: 0;
     }
   }
}
</style>
